import { reactive, toRefs, watch } from 'vue';
import { TablePageSizeOptions } from '@/types/const';
import { useBreakpoint } from '@/hooks/modules/useBreakpoint';

type Callback = () => void;
export interface Options {
  defaultPageSize: number;
  defaultSizeOptions: number[];
}

/**
 * desc 分页操作
 */
export function usePagination(
  callback: Callback,
  options: Options = {
    defaultPageSize: 10,
    defaultSizeOptions: TablePageSizeOptions,
  }
) {
  const { breakpoint } = useBreakpoint();

  const pagination = reactive({
    showPageSize: true,
    showTotal: true,
    current: 1,
    pageSize: options.defaultPageSize,
    pageSizeOptions: options.defaultSizeOptions,
    total: 0,
    simple: false,
    onChange: (size: number) => {
      pagination.current = size;
      // eslint-disable-next-line no-unused-expressions
      callback && callback();
    },
    onPageSizeChange: (size: number) => {
      pagination.current = 1;
      pagination.pageSize = size;
      // eslint-disable-next-line no-unused-expressions
      callback && callback();
    },
  });

  watch(
    () => breakpoint.value,
    () => {
      pagination.simple = ['xs'].includes(breakpoint.value);
      pagination.showTotal = !['xs'].includes(breakpoint.value);
    },
    { immediate: true }
  );

  const changeCurrent = pagination.onChange;
  const changePageSize = pagination.onPageSizeChange;
  function setTotal(value: number) {
    pagination.total = value;
  }

  const { current, pageSize, total } = toRefs(pagination);

  return {
    current,
    pageSize,
    total,
    pagination,
    changeCurrent,
    changePageSize,
    setTotal,
  };
}

